<!--
  富文本
-->
<script setup lang="ts">
import { ref, computed } from 'vue'
import { throttle } from '@/utils/system'
import EditorForm from '@/components/business-form/home/EditorForm.vue'
import 'viewerjs/dist/viewer.css'

const conditionMethod = () => {
  const cond: any = {}
  return cond
}

const fullscreenLoading = ref(false)

const baseTableRef = ref()

const editorTitle = computed(() => {
  const titleObj: any = {
    add: '新增富文本',
    edit: '编辑富文本',
    read: '查看富文本'
  }
  return titleObj[editorStatus.value]
})
const editorVisible = ref(false)
const editorStatus = ref('add')

const editorFormRef = ref()
const pageDatas: any = ref([])
const getShowRoomPage = async () => {
  return new Promise((resolve: any) => {
    resolve({
      pages: 10,
      records: pageDatas.value,
      total: pageDatas.value.length
    })
  })
}

const curItem = ref<any>(null)

const handleAdd = () => {
  editorStatus.value = 'add'
  curItem.value = null
  editorVisible.value = true
}

const handleDrawerClose = () => {
  editorVisible.value = false
}

const handleSubmit = throttle(() => {
  editorFormRef.value.submitForm().then((data: any) => {
    if (data) {
      console.log(data)
      pageDatas.value.push(data)
      editorVisible.value = false
      baseTableRef.value.refresh()
    }
  })
})

const handleEdit = (row: any) => {
  editorStatus.value = 'edit'
  curItem.value = row
  editorVisible.value = true
}

const handleDetail = (row: any) => {
  editorStatus.value = 'read'
  curItem.value = row
  editorVisible.value = true
}

const handleDelete = (row: any, index: any) => {
  pageDatas.value.splice(index, 1)
}
</script>

<template>
  <BasePage v-loading.fullscreen="fullscreenLoading" intitle>
    <template #intitle>富文本编辑器</template>
    <template #toolbar>
      <el-button type="primary" @click="handleAdd">
        <template #icon>
          <SvgIcon icon="plain-add"></SvgIcon>
        </template>
        新增
      </el-button>
    </template>
    <BaseTable ref="baseTableRef" :init-table-method="getShowRoomPage" :condition-method="conditionMethod">
      <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="scope">
          <el-button type="success" link @click="handleDetail(scope.row)">查看</el-button>
          <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" link @click="handleDelete(scope.row, scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </BaseTable>
  </BasePage>
  <BaseDrawer v-model="editorVisible">
    <template #title>{{ editorTitle }}</template>
    <template #footer>
      <el-button type="info" text bg @click="handleDrawerClose">取消</el-button>
      <el-button v-if="editorStatus != 'read'" type="primary" @click="handleSubmit">确认</el-button>
    </template>
    <EditorForm ref="editorFormRef" :data="curItem" :status="editorStatus"></EditorForm>
  </BaseDrawer>
</template>

<style lang="scss" scoped>
.upshow-container {
  @include rect(100%, auto);
  box-sizing: border-box;
  padding: 0 32px;
  :deep(.el-tabs__header) {
    margin: 0;
    .el-tabs__nav-wrap::after {
      background-color: rgba(255, 255, 255, 0);
    }
  }
}
</style>
